<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useAppsStore } from '@/stores/modules/app'
import phoneCountryEnum from '@/enum/phoneCountryEnum'
import QrcodeVue from 'qrcode.vue'
import { useThemeVars } from 'naive-ui'
import type { SelectOption } from 'naive-ui'
import type { VNodeChild } from 'vue'
import { inject } from 'vue'
import loginApi from '@/service/api/login'
const useStore = useAppsStore()
const themeVars = useThemeVars()
const { setLoginShow, setToken } = useStore
const { getLoginShow: loginShow } = storeToRefs(useStore)
type TabType = 'LOGIN' | 'SMS'
const isPass = ref(false)
const state = reactive<{
  url: string
  qrState: string
  showDown: boolean
  type: TabType
  inputType: 'text' | 'password'
}>({
  url: 'https://www.baidu.com',
  qrState: 'SCANNED',
  showDown: false,
  type: 'LOGIN',
  inputType: 'password'
})

const inputTypeChange = () => {
  state.inputType = state.inputType === 'text' ? 'password' : 'text'
}
const typeChange = (e: TabType) => {
  if (e === 'SMS') {
    msgUtil.$message.error('暂未开放注册')
    return
  }
  state.type = e
}
const handOver = () => {
  state.showDown = true
}
const handOut = () => {
  state.showDown = false
}

const queryForm = ref<any>({
  email: '2946021889@qq.com',
  password: '123123',
  type: '86',
  code: ''
})

const renderLabel = (option: SelectOption): VNodeChild => {
  return [
    h(
      'div',
      {
        style: {
          width: '180px',
          display: 'flex',
          justifyContent: 'space-between'
        }
      },
      [
        h(
          'div',
          {},
          {
            default: () => option.label
          }
        ),
        h(
          'div',
          {},
          {
            default: () => `+${option.value}`
          }
        )
      ]
    )
  ]
}
const $clone = inject('$clone') as <T>(data: T) => T
const loginLoading = ref<boolean>(false)
const handLogin = async () => {
  const params = $clone(queryForm.value)
  if (!params.email) return
  if (!params.password) return
  loginLoading.value = true
  try {
    const { code, data, msg } = await loginApi.login(params)
    if (code !== 0) {
      msgUtil.$message.error(msg)
    } else {
      await setToken(data)
      msgUtil.$message.success('登录成功')
      setLoginShow(false)
    }
  } finally {
    loginLoading.value = false
  }
}
const { width } = useWindowSize()
</script>
<template>
  <n-modal :show="loginShow">
    <div
      class="norem-login-dia"
      :class="{
        'norem-login-dia-fouce': isPass,
        'phone-login-dia': width <= 800
      }"
      :style="{
        '--n-color': themeVars.primaryColor
      }"
    >
      <div class="close" @click="setLoginShow(false)">
        <i class="norem-close esayIcon esayIcon-guanbi"></i>
      </div>
      <template v-if="width <= 800">
        <form class="norem-form" action="">
          <template v-if="state.type === 'LOGIN'">
            <div class="norem-form__item">
              <div class="norem-label">账号</div>
              <input
                v-model.trim="queryForm.email"
                autocomplete="on"
                maxlength="32"
                placeholder="请输入账号"
                type="text"
              />
            </div>
            <div class="norem-lines"></div>
            <div class="norem-form__item">
              <div class="norem-label">密码</div>
              <input
                v-model.trim="queryForm.password"
                autocomplete="on"
                maxlength="32"
                placeholder="请输入密码"
                :type="state.inputType"
                @focus="isPass = true"
                @blur="isPass = false"
              />
              <div class="norem-icon" @click="inputTypeChange">
                <template v-if="state.inputType === 'text'">
                  <i class="norem-icon-i esayIcon esayIcon-yulan"></i>
                </template>
                <template v-else>
                  <i class="norem-icon-i esayIcon esayIcon-yincang"></i>
                </template>
              </div>
              <!--              <div class="norem-clickable">忘记密码?</div>-->
            </div>
            <div class="norem-btns">
              <n-button class="norem-btn" @click="typeChange('SMS')">
                注册
              </n-button>
              <n-button
                :disabled="!queryForm.email || !queryForm.password"
                class="norem-btn"
                :loading="loginLoading"
                type="primary"
                @click="handLogin"
              >
                登录
              </n-button>
            </div>
          </template>
          <template v-else>
            <div class="norem-form__item">
              <div class="norem-label">
                <n-popselect
                  class="norem-popselect"
                  v-model:value="queryForm.type"
                  :options="phoneCountryEnum"
                  trigger="click"
                  :render-label="renderLabel"
                  scrollable
                >
                  <div class="select-guo">
                    <span>+{{ queryForm.type }}</span>
                    <i class="norem-icon esayIcon esayIcon-xiangxia2"></i>
                  </div>
                </n-popselect>
              </div>
              <input
                v-model.trim="queryForm.cellphone"
                autocomplete="on"
                maxlength="32"
                placeholder="请输入账号"
                type="text"
              />
            </div>
            <div class="norem-lines"></div>
            <div class="norem-form__item">
              <div class="norem-label">验证码</div>
              <input
                v-model.trim="queryForm.code"
                autocomplete="on"
                maxlength="32"
                placeholder="请输入验证码"
                type="text"
              />
            </div>
            <div class="norem-reginster-btns">
              <n-button class="norem-btn" type="primary">登录/注册</n-button>
            </div>
          </template>
          <div class="norem-other">
            <div class="norem-other-name">其他登录方式</div>
            <div class="norem-row">
              <div class="norem-item">
                <img
                  class="norem-logo"
                  src="@/assets/login/wx.png"
                  alt="微信登录"
                />
                <span class="norem-logo-name">微信登录</span>
              </div>
              <div class="norem-item">
                <img
                  class="norem-logo"
                  src="@/assets/login/wb.png"
                  alt="微博登录"
                />
                <span class="norem-logo-name">微博登录</span>
              </div>
              <div class="norem-item">
                <img
                  class="norem-logo"
                  src="@/assets/login/qq.png"
                  alt="QQ登录"
                />
                <span class="norem-logo-name">QQ登录</span>
              </div>
            </div>
          </div>
        </form>
      </template>
      <template v-else>
        <div class="main">
          <div class="main-top">
            <div class="left">
              <div class="norem-name">
                {{ state.showDown ? '扫描下载客户端' : '扫描二维码登录' }}
              </div>
              <div class="norem-qr-code" :class="{ border: !state.showDown }">
                <QrcodeVue :value="state.url" :size="182"></QrcodeVue>
                <div v-if="state.qrState === 'SCANNED'" class="norem-mentc">
                  <span class="norem-mentc-text">已扫码,请在手机端确认</span>
                </div>
                <div class="noren-down-pop" v-if="state.showDown">
                  <img
                    class="norem-down-img"
                    src=""
                    alt="下载二维码"
                  />
                  <img
                    class="norem-logo"
                    src=""
                    alt="logo"
                  />
                </div>
              </div>
              <div class="norem-tips">
                <div class="row norem-span">
                  <span>请使用</span>
                  <span
                    class="active"
                    @mouseover="handOver"
                    @mouseout="handOut"
                  >
                    小白圈客户端
                  </span>
                </div>
                <div class="row norem-span">扫码登录或扫码下载App</div>
              </div>
            </div>
            <div class="line"></div>
            <div class="right">
              <div class="tabs">
                <div
                  class="norem-tab"
                  :class="{ 'norem-tab-active': state.type === 'LOGIN' }"
                  @click="typeChange('LOGIN')"
                >
                  密码登录
                </div>
                <div class="norem-login-tab-line"></div>
                <div
                  class="norem-tab"
                  :class="{ 'norem-tab-active': state.type === 'SMS' }"
                  @click="typeChange('SMS')"
                >
                  短信登录
                </div>
              </div>
              <form class="norem-form" action="">
                <template v-if="state.type === 'LOGIN'">
                  <div class="norem-form__item">
                    <div class="norem-label">账号</div>
                    <input
                      v-model.trim="queryForm.email"
                      autocomplete="on"
                      maxlength="32"
                      placeholder="请输入账号"
                      type="text"
                    />
                  </div>
                  <div class="norem-lines"></div>
                  <div class="norem-form__item">
                    <div class="norem-label">密码</div>
                    <input
                      v-model.trim="queryForm.password"
                      autocomplete="on"
                      maxlength="32"
                      placeholder="请输入密码"
                      :type="state.inputType"
                      @focus="isPass = true"
                      @blur="isPass = false"
                    />
                    <div class="norem-icon" @click="inputTypeChange">
                      <template v-if="state.inputType === 'text'">
                        <i class="norem-icon-i esayIcon esayIcon-yulan"></i>
                      </template>
                      <template v-else>
                        <i class="norem-icon-i esayIcon esayIcon-yincang"></i>
                      </template>
                    </div>
                    <div class="norem-clickable">忘记密码?</div>
                  </div>
                  <div class="norem-btns">
                    <n-button class="norem-btn" @click="typeChange('SMS')">
                      注册
                    </n-button>
                    <n-button
                      :disabled="!queryForm.email || !queryForm.password"
                      class="norem-btn"
                      :loading="loginLoading"
                      type="primary"
                      @click="handLogin"
                    >
                      登录
                    </n-button>
                  </div>
                </template>
                <template v-else>
                  <div class="norem-form__item">
                    <div class="norem-label">
                      <n-popselect
                        class="norem-popselect"
                        v-model:value="queryForm.type"
                        :options="phoneCountryEnum"
                        trigger="click"
                        :render-label="renderLabel"
                        scrollable
                      >
                        <div class="select-guo">
                          <span>+{{ queryForm.type }}</span>
                          <i class="norem-icon esayIcon esayIcon-xiangxia2"></i>
                        </div>
                      </n-popselect>
                    </div>
                    <input
                      v-model.trim="queryForm.cellphone"
                      autocomplete="on"
                      maxlength="32"
                      placeholder="请输入账号"
                      type="text"
                    />
                  </div>
                  <div class="norem-lines"></div>
                  <div class="norem-form__item">
                    <div class="norem-label">验证码</div>
                    <input
                      v-model.trim="queryForm.code"
                      autocomplete="on"
                      maxlength="32"
                      placeholder="请输入验证码"
                      type="text"
                    />
                  </div>
                  <div class="norem-reginster-btns">
                    <n-button class="norem-btn" type="primary">
                      登录/注册
                    </n-button>
                  </div>
                </template>
                <div class="norem-other">
                  <div class="norem-other-name">其他登录方式</div>
                  <div class="norem-row">
                    <div class="norem-item">
                      <img
                        class="norem-logo"
                        src="@/assets/login/wx.png"
                        alt="微信登录"
                      />
                      <span class="norem-logo-name">微信登录</span>
                    </div>
                    <div class="norem-item">
                      <img
                        class="norem-logo"
                        src="@/assets/login/wb.png"
                        alt="微博登录"
                      />
                      <span class="norem-logo-name">微博登录</span>
                    </div>
                    <div class="norem-item">
                      <img
                        class="norem-logo"
                        src="@/assets/login/qq.png"
                        alt="QQ登录"
                      />
                      <span class="norem-logo-name">QQ登录</span>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <div class="norem-main-bottom">
            <p>未注册过小白圈的手机号，我们将自动帮你注册账号</p>
            <p>
              登录或完成注册即代表你同意
              <span class="norem-xy">用户协议</span>
              和
              <span class="norem-xy">隐私政策</span>
            </p>
          </div>
        </div>
      </template>
    </div>
  </n-modal>
</template>
<style scoped lang="scss">
.norem-login-dia {
  width: 820px;
  min-height: 430px;
  background-color: #fff;
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  padding: 52px 65px 29px 92px;
  background-image: url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_open.4ea5f239.png),
    url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_open.f7d7f655.png);
  background-position: 0 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-size: 14%;
  position: relative;
  .close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    .norem-close {
      font-weight: bold;
      font-size: 20px;
    }
  }
  &-fouce {
    background-image: url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_close.9382a5a8.png),
      url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_close.a8c18fc8.png);
  }

  .main {
    flex: 1;
    &-top {
      display: flex;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        .norem-name {
          font-weight: 500;
          font-size: 18px;
          line-height: 16px;
          color: #505050;
          margin-bottom: 26px;
        }
        .border {
          border: 1px solid #d6d6d6;
        }
        .norem-qr-code {
          width: 200px;
          height: 200px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          box-sizing: border-box;
          overflow: hidden;
          .noren-down-pop {
            position: absolute;
            z-index: 10;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            .norem-down-img {
              width: 100%;
              height: 100%;
            }
            .norem-logo {
              position: absolute;
              z-index: 11;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 34px;
              height: 34px;
              border-radius: 8px;
            }
          }
          .norem-mentc {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            background: hsla(0, 0%, 100%, 0.9);
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
            .norem-mentc-text {
              font-weight: 500;
              font-size: 13px;
              line-height: 19px;
              color: #61666d;
            }
          }
        }
        .norem-tips {
          margin-top: 20px;
          .row {
            display: flex;
            align-items: center;
            justify-content: center;
            .active {
              margin-left: 2px;
              color: var(--n-color);
              cursor: pointer;
            }
          }
          .norem-span {
            font-size: 13px;
          }
        }
      }
      .line {
        position: relative;
        display: block;
        width: 1px;
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        height: 228px;
        background-color: #e3e5e7;
        margin: 43px 44px 0 45px;
        z-index: 1;
        border-radius: 8px;
        transform: scaleX(0.5);
        -webkit-transform: scaleX(0.5);
      }
      .right {
        width: 400px;
        .tabs {
          display: flex;
          justify-content: center;
          .norem-tab {
            font-weight: 500;
            font-size: 18px;
            line-height: 20px;
            color: #505050;
            cursor: pointer;
            &-active {
              color: var(--n-color);
            }
          }
          .norem-login-tab-line {
            width: 1px;
            height: 20px;
            background: #e3e5e7;
            border-radius: 8px;
            margin: 0 21px;
          }
        }
      }
    }
    .norem-main-bottom {
      position: absolute;
      bottom: 29px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 13px;
      color: #999;
      text-align: center;
      line-height: 19px;
      .norem-xy {
        color: var(--n-color);
        cursor: pointer;
      }
    }
  }

  .norem-form {
    margin-top: 24px;
    width: 400px;
    height: 90px;
    border: 1px solid #e3e5e7;
    border-radius: 8px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #212121;
    .norem-lines {
      display: block;
      width: 100%;
      height: 0;
      border-bottom: 1px solid #e3e5e7;
    }
    .norem-form__item {
      position: relative;
      display: flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      height: 44px;
      padding: 12px 20px;
      .norem-label {
        width: 50px;
        .select-guo {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          .norem-icon {
            color: gray;
            font-size: 16px;
          }
        }
        .norem-popselect {
          background-color: red;
        }
      }
      input {
        flex: 1;
        min-width: 0;
        box-shadow: inset 0 0 0 1000px #fff;
        margin-left: 20px;
        border: none;
        outline: none;
      }
      .norem-icon {
        padding: 0 10px;
        cursor: pointer;
        &-i {
          font-size: 14px;
          color: gray;
        }
      }
      .norem-clickable {
        color: var(--n-color);
        cursor: pointer;
      }
    }
    .norem-btns {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .norem-btn {
        width: 194px;
        height: 40px;
      }
    }
    .norem-reginster-btns {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      .norem-btn {
        width: 194px;
        height: 40px;
      }
    }
    .norem-other {
      margin-top: 24px;
      &-name {
        text-align: center;
        color: #9499a0;
        font-weight: 400;
        font-size: 13px;
        line-height: 16px;
      }
      .norem-row {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 30px;
        .norem-item {
          display: flex;
          align-items: center;
          cursor: pointer;
          .norem-logo {
            width: 28px;
            height: 28px;
            margin-right: 8px;
            display: block;
          }
          .norem-logo-name {
            font-weight: 400;
            font-size: 13px;
            line-height: 16px;
            color: #9499a0;
          }
        }
      }
    }
  }
}

.phone-login-dia {
  width: 300px;
  padding: 20px;
  min-height: 330px;
  .close {
    top: 10px;
    right: 10px;
  }
  .norem-form {
    margin-top: 30px;
    width: 100%;
    .norem-btns {
      .norem-btn {
        width: 124px;
        height: 40px;
      }
    }
  }
  .norem-other {
    .norem-row {
      .norem-item {
        flex-direction: column;
        .norem-logo-name {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
